{extend name="../../admin/view/main"}

{block name="content"}
<div class="layui-tab layui-tab-card">
	<div class="layui-tab-content">
		{include file='mysql/index_search'}
        <table id="TablesIndexTable" data-url="{:sysuri()}" data-target-search="form.form-search"></table>
    </div>
</div>
{/block}

{block name='script'}
<script>
    $(function () {
        // 初始化表格组件
        $('#TablesIndexTable').layTable({
            even: true, height: 'full',
            sort: {field: 'table_name', type: 'asc'},
            where: {},
            cols: [[
				{
					field: 'table_name', title: '表名', align: 'center', minWidth: 180, templet: function (d) {
						let displayText = ` <span class="text-center padding-left-0 border-0"> ${d.table_name} </span> `;
						return displayText;
					}
				},
				{
					field: 'column_name', title: '新表名', align: 'center', width: 300, templet: function (d) {
						let displayText = ` <input data-value="table_name#${d.table_name};key#table_name;value#{value}" data-loading="true" value="${d.table_name}" class="layui-input text-center padding-left-0 table-name-blur"> `;
						return displayText;
					}
				},
				{
					field: 'table_comment', title: '注释', align: 'center', minWidth: 180, templet: function (d) {
						let displayText = ` <span class="text-center padding-left-0 border-0"> ${d.table_comment} </span> `;
						return displayText;
					}
				},
				{
					field: 'table_comment', title: '注释', align: 'center', width: 300, templet: function (d) {
						let displayText = ` <input data-value="table_name#${d.table_name};key#table_comment;value#{value}" data-loading="true" value="${d.table_comment}" class="layui-input text-center padding-left-0 table-name-blur"> `;
						return displayText;
					}
				},
				{
					field: 'data_type', title: '字段', align: 'center', width: 100 , fixed: 'right',  templet: '#TablesToolTpl'
				}
			]]
        });
		
		// 监听 blur 事件
		$(document).on('blur', '.table-name-blur', function () {
		    update(this);
		});

		// 数据自动更新
		function update(self) {
			var data = {};
			var $self = $(self);
			
			// 解析 data-value
			var dataValue = $self.attr('data-value');
			if (dataValue) {
				dataValue.split(';').forEach(function (item) {
					var parts = item.split('#');
					data[parts[0]] = parts[1];
				});
			}
			
			// 更新 value
			data.value = $self.val() || $self.attr('value');
			
			// 显示加载提示
			layer.tips('<p class="color-blue"><i class="fa fa-spinner fa-spin"></i> 更新数据...</p>', $(self), {tips: [1, '#FFF']});
			
			// 发送请求
			$.form.load('{:url("table_update")}', data, 'post', function (ret) {
				if (ret.code === 0) {
					// 更新失败
					return layer.tips('<p class="color-red"><i class="fa fa-spinner fa-spin"></i> ' +ret.info+ '</p>', $(self), {tips: [1, '#FFF']}), false;
				} else {
					// 更新表格
					$('#TablesIndexTable').trigger('reload')
					// 更新成功
					return layer.tips('<p class="color-green"><i class="fa fa-spinner fa-spin"></i> 更新成功</p>', $self, {tips: [1, '#FFF']}), false;
				}
			}, false);
		}
    });

</script>

<!-- 数据操作工具条模板 -->
<script type="text/html" id="TablesToolTpl">
    <!--{if auth("fields")}-->
    <a class="layui-btn layui-btn-sm" data-dbclick data-modal="{:url('fields')}?table_name={{d.table_name}}" data-width="1400px" data-title="数据库表 [ {{d.table_name}} ] 字段管理 - 提示:修改字段可能会导致数据异常丢失，正式环境请勿修改。 ">字 段</a>
    <!--{/if}-->
</script>
{/block}